<template>
	<div class="index-list fcbc bb">
		<ul class="labelbox ">
			<li class="labels ilbk pos-re t-c cur" v-for="(v, i) in FBtype" :key="i" @click="changeList(v.fbId,i)" :class="{lactive: ilabel === i}">
				<!-- <span> -->
					<img class="img cur" :src="v.fbcoin">
				<!-- </span> -->
				<span class="ccc" v-text="v.fbname" />
			</li>
		</ul>
		<ul class="table bb w1 pos-re" >
			<li class="tr0 flex">
				<span class="td">&nbsp;</span>
				<span v-for="(v, i) in Lang.list[lang]" :key="i" class="td" v-text="v" />
			</li>
			<li v-for="(v) in showList" :key="v.c2c" class="flex bg0 cur animation" @click="e_star(v.ftrademappingid)">
				<span class="td">
					<img class="img cur" :src="imgs" :data-cid="v.cid">
				</span>
				<span class="td" v-text="v.TransactionName" >eth/usdt</span>
				<span class="td" v-text="v.newPrice==undefined?0:v.newPrice">583.97</span>
				<span class="td" :class="v.color" v-text="v.increase==undefined?'0%':(v.increase+'%')">-3.25%</span>
				<span class="td" v-text="v.maxPrice==undefined?0:v.maxPrice">606.66</span>
				<span class="td" v-text="v.minPrice==undefined?0:v.minPrice">577.77</span>
			</li>
		</ul>
	</div>
</template>

<script>
import imgEd from './ed.png'
import {vpost, vlink} from '@api'
import imgWill from './logo.png'
import { bus } from '../../../main';
import Lang from './lang'
import { Indicator } from 'mint-ui';
export default {
	data() {
		return {
			Lang,
			ilabel: 0,
			imgs: imgEd,
			showList: [],
			FBtype: [],
			timing: '', //定时函数
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {},
	mounted() {
		this.getTransactionPair()
		this.timing = setInterval(() => {
			// 获取交易信息
			this.changeList(this.FBtype[this.ilabel].fbId, this.ilabel)
		}, 10 * 1000)
	},
	methods: {
		e_star(ftrademappingid) {
			// let t = event.target
			// let d = t.dataset.cid
			if (true) {
				
				if (ftrademappingid == 0) {
					ftrademappingid == showList[0].ftrademappingid
				}
				bus.$emit('choostBZ1', ftrademappingid)
				//Vuex属性赋值
				this.$store.commit('set_trade_ftrademappingid', ftrademappingid)
				this.$store.commit('set_kline', true)
				//路由传参跳转
				this.$router.push({
					name: 'kline',
					params: {
						ftrademappingid: ftrademappingid,
						FBtypeid: this.FBtype[this.ilabel].fbId,
					},
				})

				return false
			}
	
		},
		//获取法币类型（初始化）
		getFrenchCurrency(cb) {
			let forgetdata = {
				cointypeId: null,
			}
			vpost(vlink.bbTrade.getFrenchCurrency).then(re => {
				forgetdata.cointypeId = re.data.FBList[0].fbId
				this.FBtype = re.data.FBList
				cb(forgetdata)
			})
		},
		//获取交易对信息（初始化）
		getTransactionPair() {
			this.getFrenchCurrency(forgetdata => {
				vpost(vlink.bbTrade.getTransactionPair, forgetdata).then(re => {
					this.showList = re.data.FBList
				})
			})
		},
		//获取交易对信息
		changeList(fid, i) {
			this.ilabel = i
			let forgetdata = {
				cointypeId: fid,
			}
			vpost(vlink.bbTrade.getTransactionPair, forgetdata).then(re => {
				this.showList = re.data.FBList
			})
		},
	},

	destroyed() {
		clearInterval(this.timing)
		this.timing=null

	},
}
</script>

<style scoped>
.index-list {
	margin: 20px auto;
	overflow: auto;
	min-height: 60vh;
	max-height: 90vh;
	width: 90%;
	border-radius: 6px;
	align-items: flex-start;
	color: #c7cce6;
}

.labelbox {
	height: 40px;
	font-size: 0;
}

.labels {
	border: 1px solid #4e5b85;
	border-width: 1px 1px 0 0;
	width: 180px;
	line-height: 40px;
	font-size: 16px;
}

/* .lactive::after {
	content: '';
	z-index: 10;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #262A42;
} */
.lactive {
	background-color: #c7cce6;
	color: #7a98f7;
	font-size: 18px;
}

.labels:nth-of-type(1) {
	border-top-left-radius: 6px;
	border-left-width: 1px;
}

.labels:last-of-type {
	border-top-right-radius: 6px;
}

.table {
	flex-grow: 1;
	border-radius: 0 6px 6px 6px;
	border: 1px solid #4e5b85;
	background-color: #202437;
}

.tr0 {
	background-color: #262a42;
}

.td {
	width: 20%;
	line-height: 40px;
	font-size: 14px;
	align: center
}

.td:nth-of-type(1) {
	width: 80px;
	flex-grow: 0;
	text-align: center;
}

.bg0:hover {
	background-color: #131520;
}

.coin-red {
	color: #ae4e54;
}

.coin-green {
	color: #66ccff;
}

.img {
	margin-top: 10px;
	height: 20px;
}
</style>
